<template>
	<view>
		<carHeader :title="'维修记录'"></carHeader>
		<view class="top">
			<image src="/static/车联网服务-08我的-03我的维修-01维修方式选择_slices/矩形 6@3x.png"></image>
			<p>核销码：WE343235V</p>
			<image src="/static/二维码/Snipaste_2024-08-22_14-55-30.jpg" class="erweima"></image>
		</view>
		<view class="middle">
			<image src="/static/车联网服务-08我的-03我的维修-01维修方式选择_slices/矩形 6@3x.png"></image>
			<p>维修信息</p>
			<view class="xian"></view>
			<view class="xinxi">
				<view class="info-item1">  
				      <text class="label">维修单号：</text>  
				      <text class="value">3535252</text>  
				</view>  
				<view class="info-item">
				      <text class="label">维修状态：</text>  
				      <text class="value">已完成</text>  
				</view>  
				<view class="info-item">
				      <text class="label">车主姓名：</text>  
				      <text class="value">张</text>  
				</view>  
				<view class="info-item">
				      <text class="label">联系方式：</text>  
				      <text class="value">123456789</text>  
				</view>  
				<view class="info-item">
				      <text class="label">维修方式：</text>  
				      <text class="value">上门取车</text>  
				</view>  
				<view class="info-item">
				      <text class="label">取车位置：</text>  
				      <text class="value">山阳区32号</text>  
				</view>  
				<view class="info-item">
				      <text class="label">预约日期：</text>  
				      <text class="value">2022/11/10 11:00</text>  
				</view>  
				<view class="info-item">
				      <text class="label">提交日期：</text>  
				      <text class="value">2022/11/08 12:20</text>  
				</view>  
			</view>
		</view>
		<view class="bottom">
			<image src="/static/车联网服务-08我的-03我的维修-01维修方式选择_slices/矩形 6@3x.png"></image>
			<p>车辆信息</p>
			<view class="xian"></view>
			<view class="car_xinxi">
				<view class="car_item1">
					<text class="car_label">车辆信息：</text>
					<text class="car_value">大客车</text>
				</view>
				<view class="car_item">
					<text class="car_label">车牌号：</text>
					<text class="car_value">豫A88888</text>
				</view>
				<view class="car_zp">
					<text class="car_label">整车照片：</text>
					<image src="../../static/logo.png"></image>
				</view>
				<view class="carwx_zp">
					<text class="car_label">维修部位照片：</text>
					<view class="wx_zp">
					<view class="photo_item" v-for="(photoUrl, index) in photourl" :key="index">
					      <image :src="photoUrl"  class="wx_photo"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				photourl:[
					'../../static/logo.png',
					'/static/车联网服务-08我的-05我的车辆添加_slices/组 4.png',
					'../../static/logo.png'
				]
			};
		}
	}
</script>

<style lang="scss">
	.top{
		// background-color: aqua;
		image{
			position: absolute;
			width: 750rpx;
			height: 350rpx;
			top: 80rpx;
		}
		p{
			position: relative;
			top: -200rpx;
			left: 230rpx;
			color: #b4b4b4;
		}
		.erweima{
			position: absolute;
			width: 150rpx;
			height: 150rpx;
			left: 300rpx;
			top: 200rpx;
		}
	}
	.middle{
		image{
			position: absolute;
			width: 750rpx;
			height: 700rpx;
			top: 400rpx;
		}
		p{
			position: relative;
			font-size: 35rpx;
			font-weight: 600;
			top: 50rpx;
			left: 50rpx;
		}
		.xian{
			position: relative;
			width: 80%;
			height: 8rpx;
			background-color: #dfdfdf;
			top: 70rpx;
			left: 55rpx;
		}
		.xinxi{
			position: relative;
			width: 80%;
			.label{
				font-size: 30rpx;
				 font-weight: normal;
				 margin-top: 35rpx;
			}
			.info-item1{
				 display: flex;  
				  justify-content: space-between; /* 两端对齐，使标签和值之间有间隔 */  
				  align-items: center; /* 垂直居中 */  
				  margin-top: 50rpx;
				  margin-left: 55rpx;
			}
			.info-item{
				 display: flex;  
				  justify-content: space-between;  
				  align-items: center; 
				  margin-top: -15rpx;
				  margin-left: 55rpx;
			}
			.value{
				color: #b4b4b4;
				margin-top: 35rpx;
				margin-right: -50rpx;
			}
			.wx_zt{
				font-size: 30rpx;
				font-weight: normal;
				margin-top: 20rpx;
			}
		}
	}
	.bottom{
		image{
			position: absolute;
			width: 750rpx;
			height: 750rpx;
			top: 1040rpx;
		}
		p{
			position: relative;
			font-size: 35rpx;
			font-weight: 600;
			top: 80rpx;
			left: 50rpx;
		}
		.xian{
			position: relative;
			width: 80%;
			height: 8rpx;
			background-color: #dfdfdf;
			top: 100rpx;
			left: 55rpx;
		}
		.car_xinxi{
			position: relative;
			width: 80%;
			.car_label{
				font-size: 30rpx;
				 font-weight: normal;
				 margin-top: 35rpx;
			}
			.car_item1{
				 display: flex;  
				  justify-content: space-between; /* 两端对齐，使标签和值之间有间隔 */  
				  align-items: center; /* 垂直居中 */  
				  margin-top: 80rpx;
				  margin-left: 55rpx;
			}
			.car_item{
				 display: flex;  
				  justify-content: space-between;  
				  align-items: center; 
				  margin-top: -15rpx;
				  margin-left: 55rpx;
			}
			.car_value{
				color: #b4b4b4;
				margin-top: 35rpx;
				margin-right: -50rpx;
			}
			.car_zp{
				// background-color: red;
				margin-left: 55rpx;
				margin-top: 20rpx;
				image{
					position: absolute;
					width: 120rpx;
					height: 120rpx;
					top: 220rpx;
					left: 60rpx;
				}
			}
			.carwx_zp{
				margin-left: 55rpx;
				margin-top: 150rpx;
				.wx_zp{
					width: 100%;
					display: flex;
					padding-top: 10px;
					.photo_item{
						margin-left: 10rpx;
					}
					.wx_photo{
						position: relative;
						width: 120rpx;
						height: 120rpx;
						top: 0rpx;
						left: 0rpx;
					}
				}
			}
		}
	}
</style>
